<template>
  <div class="category">
    <cate-nav-bar />
    <tab-control
      v-show="!scrollTabContShow"
      class="tab-cont"
      ref="tabcont2"
      :titles="['综和','新品','销量']"
      @itemClick="itemClick"
    />
    <div class="content">
      <cate-menu-bar :menu-title="categoryList" @menuClick="menuclick" />
      <scroll ref="scroll" class="detail-content" :probe-type="3" @scroll="scroll">
        <head-category :head-category="showSubcategories" @headCateImgLoad="imgLoad" />
        <tab-control
          v-show="scrollTabContShow"
          ref="tabcont1"
          :titles="['综和','新品','销量']"
          @itemClick="itemClick"
        />
        <good-list :goods="showCategoryDetail" />
      </scroll>
    </div>
  </div>
</template>

<script>
import cateNavBar from "./childComp/navBar";
import cateMenuBar from "./childComp/menuBar";
import headCategory from "./childComp/headCategory";
import tabControl from "components/content/tabControl/tabControl";
import goodList from "components/content/goods/goodsList";

import scroll from "components/content/scroll/scroll";

import { tabControlMixin, goodsItemImgLoadMixin } from "utils/mixin";

import {
  getCategory,
  getSubcategory,
  getCategoryDetail
} from "service/category";
export default {
  name: "category",
  data() {
    return {
      categoryList: [],
      categoryData: {},
      currentIndex: -1,
      tabcont1OffsetTop: 0
    };
  },
  components: {
    cateNavBar,
    cateMenuBar,
    headCategory,
    tabControl,
    goodList,

    scroll
  },
  created() {
    this._getCategory();
  },
  deactivated() {
    // 离开home组件时，取消事件总线goodsItemImgLoad的监听
    this.$bus.$off("goodsItemImgLoad", this.goodsItemImgLoadListener);
  },
  computed: {
    showSubcategories() {
      if (this.currentIndex === -1) return;
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return;
      return this.categoryData[this.currentIndex].categoryDetail[
        this.currentType
      ];
    }
  },
  mixins: [tabControlMixin, goodsItemImgLoadMixin],
  methods: {
    // 获取分类菜单标题数据
    _getCategory() {
      getCategory().then(res => {
        this.categoryList = res.data.category.list;
        // 初始化每个类别的数据
        for (let i = 0; i < this.categoryList.length; i++) {
          this.categoryData[i] = {
            subcategories: [],
            categoryDetail: {
              pop: [],
              new: [],
              sell: []
            }
          };
        }
        // 请求第一个分类的数据
        this._getSubcategory(0);
      });
    },
    _getSubcategory(index) {
      this.currentIndex = index;
      const maitKey = this.categoryList[index].maitKey;
      getSubcategory(maitKey).then(res => {
        this.categoryData[index].subcategories = res.data.list;
        this.categoryData = { ...this.categoryData };
        this._getCategoryDetail("pop");
        this._getCategoryDetail("sell");
        this._getCategoryDetail("new");
      });
    },
    _getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallKey = this.categoryList[this.currentIndex].miniWallkey;
      getCategoryDetail(miniWallKey, type).then(res => {
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },

    menuclick(index) {
      this._getSubcategory(index);
    },
    scroll(position) {
      this.scrollTabContShow = this.tabcont1OffsetTop > -position.y;
    },
    imgLoad() {
      this.tabcont1OffsetTop = this.$refs.tabcont1.$el.offsetTop;
    }
  }
};
</script>

<style lang="less" scoped>
.category {
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    overflow: hidden;
    display: flex;
    .detail-content {
      flex: 1;
      height: 100%;
    }
  }
}
.tab-cont {
  position: absolute;
  left: 100px;
  right: 0;
  top: 44px;
  z-index: 99;
}
</style>